<template>
	<view class="">
		<view class="tn-padding-sm">
			<view class="content__data tn-flex-1">
				<tn-input type="textarea" placeholder="请填写完成情况" v-model="content"></tn-input>
			</view>
		</view>
		<view class="tn-padding-sm tn-margin-bottom-sm">
			<text class="tn-icon-camera" style="font-size: 70rpx;" @click="getLocalImg"></text>
			<text class="empty-text"></text>
			<!-- <text class="tn-icon-live-stream" style="font-size: 70rpx;" @click="getLocalVideo"></text> -->
		</view>
		<view class="tn-margin-bottom-sm blogger__item">
			<view class="imgs-content-view tn-padding-left-sm">
							  <view v-for="(item,index) in filePathList" :key="index" class="tn-image-upload__item">
							    <image class="tn-image-upload__item__image" :src="item" mode="aspectFill" @click="showImage(item)"></image>
							  	<text class="tn-icon-close" @click="deletePhoto(item, index)"></text>
							  </view>
			</view>
		</view>
		
		<view class="tn-padding-sm bottom-view">
				<tn-button width="100%" backgroundColor="#01BEFF" @click="uploadImgs">提交</tn-button>
		</view>
		
		<view v-if="previewImg" class="image-check-view tn-flex tn-flex-col-center" @click="previewImg=''">
			<image class="tn-width-full" :src="previewImg" mode="widthFix"></image>
			<text class="tn-icon-close" @click="previewImg=''"></text>
		</view>
		
		<tn-toast
		  ref="toast"
		></tn-toast>
	</view>
</template>

<script>
	export default {
		name: 'youerruyuan',
		data(){
			return {
				previewImg: '',
				imageTitle: '',
				content: '宝宝已完成任务',
				fileList: [],
				filePathList: [],
				detailId: ''
			}
		},
		onLoad:function(options){
		    console.log(options.id);   // 2
			this.detailId = options.id
		},
		onShow() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.fileList.forEach(item => {
				item['src'] = this.imageTitle + item.filedId;
			})
		},
		mounted() {
			this.imageTitle = this.config.apiUri + '/sysFileInfo/previewImg?id=';
			this.fileList.forEach(item => {
				item['src'] = this.imageTitle + item.filedId;
			})
		},
		methods: {
			goDetail(item){
				uni.navigateTo({
					url: '/pages/qinziyouer/renwuDetail'
				})
			},
			showImage(image_item){
				this.previewImg = image_item;
			},
			deletePhoto(item, index){
				this.fileList.splice(index, 1);
				this.filePathList.splice(index, 1)
			},
			getLocalImg(){
				if(this.fileList.length >= 9){
					return;
				}
				wx.chooseImage({
				   success: chooseResult => {
						chooseResult.tempFiles.forEach((item, index) => {
							if(this.fileList.length < 9){
								this.fileList.push(item)
								this.filePathList.push(chooseResult.tempFilePaths[index])
							}
						})
					}
				})
			},
			getLocalVideo(){
				if(this.fileList.length >= 9){
					return;
				}
				let that = this
				wx.chooseVideo({
				  sourceType: ['album'],
			      maxDuration: 60,
			      camera: 'back',
			      success: function(res) {
					that.fileList.push(res.tempFile)
					that.filePathList.push(res.tempFilePath)
			      }
			    })
			},
			
			uploadImgs(){
				
				if(!this.content.length){
					this.$refs.toast.show({
					  title: '',
					  content: '请填写完成情况',
					  icon: 'fail',
					  image: '',
					  duration: 1500
					})
					return
				}
				// if(!this.fileList.length){
				// 	this.$refs.toast.show({
				// 	  title: '',
				// 	  content: '请上传任务图片',
				// 	  icon: 'fail',
				// 	  image: '',
				// 	  duration: 1500
				// 	})
				// 	return
				// }
				 let that = this;
				 let imgIdArr = [];
				 if(!this.fileList.length){
					 // this.tijiaofunction([])
					 this.$refs.toast.show({
					   title: '',
					   content: '请上传照片',
					   icon: 'fail',
					   image: '',
					   duration: 1500
					 })
					 return;
				 }
				this.fileList.forEach(item => {
					this.uploadPhoto(item, item.path, (resData) => {
						if(resData.code == 200){
							imgIdArr.push(resData.data)
							if(imgIdArr.length == this.fileList.length){
								that.tijiaofunction(imgIdArr)
							}
						}
					})
				})
			},
			uploadPhoto(file, filePath,callBack){
				uni.uploadFile({
				    url: this.config.apiUri + '/sysFileInfo/UploadFileInfo',
					// files: arr,
					name: 'file',
					file: file,
					filePath: filePath,
				    header: {
						'Authorization': 'Bearer '+ uni.getStorageSync('token')
				    },
				    success: (res) => {
						let resData = JSON.parse(res.data)
						if(resData.code == 200){
							if(callBack){
								callBack(resData);
							}
						}else{
							  this.$refs.toast.show({
							    title: '',
							    content: resData.message || '错误',
							    icon: 'fail',
							    image: '',
							    duration: 1500
							  })
						}
				    },
					fail:(err) => {
						console.log(err)
					}
				});
			},
			tijiaofunction(imgIdarr){
				let postObj = {
				  "parentChildTasksId": this.detailId,
				  "content": this.content,
				  "imageIdList": imgIdarr
				}
				this.request({
					url: '/ParentChildTasks/Release',
					method: 'post',
					params: postObj
				}).then(res => {
					if(res.code == 200){
						this.$refs.toast.show({
							title: '',
							content: '已完成',
							icon: 'success',
							image: '',
							duration: 1500
						})		  
						  uni.navigateBack();
					}else{
						this.$refs.toast.show({
							title: '',
							content: res.message,
							icon: 'fail',
							image: '',
							duration: 1500
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.content__data{
		background-color: #ffffff;
		height: 300rpx;
		overflow-y: auto;
		border: 1px solid #aaaaaa;
		border-radius: 5px;
	}
	.empty-text{
		display: inline-block;
		width: 15px;
	}
		  .image-check-view{
			  position: fixed;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  z-index: 2;
			  background-color: rgba(255, 255, 255, 1);
			  .tn-icon-close{
				  position: absolute;
				  top: 10px;
				  right: 10px;
				  font-size: 36rpx;
				  z-index: 888;
			  }
		  }
		  
.imgs-content-view{
	  overflow: hidden;
}
  .tn-image-upload__item {
    width: 100%;
    height: 180rpx;
    border-radius: 30rpx;
    margin-bottom: 20rpx;
		  float: left;
    &__image {
      width: 100%;
      height: 180rpx;
      border-radius: 30rpx;
    }
  }.tn-image-upload__item {
	    width: 160rpx;
	    height: 160rpx;
	    border-radius: 30rpx;
	    margin-bottom: 20rpx;
		margin-right: 20rpx;
		position: relative;
	    &__image {
	      width: 100%;
	      height: 100%;
	      border-radius: 30rpx;
	    }
		  .tn-icon-close{
			  position: absolute;
			  top: 10rpx;
			  right: 10rpx;
			  font-size: 30rpx;
		  }
	  }
	  .bottom-view{
		  position: absolute;
		  bottom: 5rpx;
		  width: 100%;
	  }
</style>